<template>
    <div class="box">
        <div class="fixedbox">
            <div class="head_top">
                <div class="top_list" :class='id==m.id?"seclted":""' v-for='(m,idx) in ArrList' @click='changeTitle(m.id)'>{{m.name}}</div>
            </div>
        </div>
        <div style="overflow:scroll;" class='list_box'>
            <mt-loadmore bottomPullText='加载更多'  :bottom-method="loadBottom"  :bottom-all-loaded="allLoaded" ref="loadmore" >
                <div v-for='(item,idx) in list'>
                    <div class="coupon_list">
                        <img class="img_left" src="../../assets/icon/coupon_red.png" v-if='id == 0'>
                    	<img class="img_left" src="../../assets/icon/coupon_gray.png" v-if='id == 1 || id == 2'>
                    	<div class="list_left" :class='id==0?"status_0":"status_1"'>
                            <div class="coupon_discount">{{item.Discount}}</div>   
                            <div class="coupon_condition">{{item.Condition}}</div>
                        </div>
                        <div class="list_right">
                            <div class="coupon_title">{{item.Title}}</div>
                            <div class="coupon_limit_summary">{{item.LimitSummary}}</div>
                            <div class="coupon_limit_time">有效期：{{item.FromTime}} 到 {{item.ToTime}}</div>
                            <div class="coupon_status" :class='id==0?"status_color":""'>{{item.Statu}}</div>
                        </div>
                    	<img class="img_right" src="../../assets/icon/coupon_white.png">
                    </div>
                </div>
            </mt-loadmore>
        </div>
    </div>
</template>

<script>
    import { Loadmore,Indicator, Toast } from 'mint-ui'
    export default {
        name: 'coupon',
        data () {
            return {
               id: 0,
               list: [],
               allLoaded: false,
               pageIndex: 1,
               pageSize: 20,
               ArrList: [{name:'未使用',id:0},{name:'已使用',id:1},{name:'已过期',id:2}]
            }
        },
        created: function () {
            this.init(1)
        },
        methods: {
            init: function(t){
            	const that = this
                Indicator.open()
            	that.$http('/pinhuobuyer/GetCouponList',{statuid:that.id,pageIndex:that.pageIndex,pageSize:that.pageSize},function(res){
                    Indicator.close()
                    if(res.Result){
                        if(res.Data.length == that.pageSize){
                            that.pageIndex++
                            that.allLoaded = false
                        }else{
                            that.allLoaded = true
                        }
                        if(res.Data.length > 0){
                            res.Data.map(item => {
                                item.ToTime = item.ToTime.substring(5, 10);
                                item.FromTime = item.FromTime.substring(5, 10);
                            })
                        }
                        
                        that.list = that.list.concat(res.Data)
                        if(t == 2){
                            that.$refs.loadmore.onBottomLoaded()
                        }
                    }
                },'GET')
            },
            changeTitle: function(id){
                if(this.id == id){
                    return
                }
            	this.id = id
                this.allLoaded = false
                this.pageIndex = 1
                this.list = []
                this.init(1)
            },
            loadBottom: function(){
                this.init(2)
            }
        },
        components:{
            Loadmore
        }
    }
</script>


<style scoped>
    .box{height: 100vh;background-color: #f5f5f5;}
    .fixedbox{width: 100%;height: 42px;position: relative;}
    .head_top{position: fixed;width: 100%;max-width: 720px;background-color: #fff;height: 42px;line-height: 42px;top: 0;display: flex;flex-direction:row;justify-content:space-around;z-index: 1;}
    .top_list{text-align:center;height: 40px;line-height: 40px;text-align: center;font-size: 12px;position: relative;border-bottom:2px solid #fff;color: #000;}
    .seclted{border-bottom:2px solid #d52831;color:#d52831;}
    .list_box{padding: 0 3%;width: 94%;}
    .coupon_list{height: 84px;padding: 0 5px;position: relative;margin:10px 0;overflow: hidden;}
    .img_left{position: absolute;left: 0;top: 0;height: 84px;width: 5px;}
    .img_right{position: absolute;right: 0;top: 0;height: 84px;width: 5px;}
    .list_left{width: 32%;height: 84px;float: left;color: #fff;}
    .status_0{background: #d52831;}
    .status_1{background: #a6a6a6;}
    .coupon_discount{text-align: center;font-size: 24px;height: 36px;line-height: 36px;padding-top: 12px;}
    .coupon_condition{text-align: center;font-size: 12px;height: 26px;line-height: 26px;}
    .list_right{width: 68%;height: 84px;float: left;background-color: #fff;color: #b8b8b8;position: relative;}
    .coupon_title{width: 90%;padding: 10px 5% 5px;line-height: 18px;color: #808080;font-size: 14px}
    .coupon_limit_summary,.coupon_limit_time{width: 90%;padding: 0 5%;font-size: 12px;height: 16px;line-height: 16px;}
    .coupon_status{position: absolute;right: 5%;top: 38px;font-size: 14px;}
    .status_color{color: #d52831;}
</style>
